<template>
  <div class="body">
    <el-tabs
      type="card"
      class="lisy baohanlist"
      v-model="activeName"
    
    >
      <el-tab-pane label="等待审核" name="first">
        <shenhe></shenhe
      ></el-tab-pane>
      <el-tab-pane label="等待出函" name="firsts">
        <shenhes></shenhes
      ></el-tab-pane>
      <el-tab-pane label="审核拒绝" name="second"> <jujue></jujue></el-tab-pane>
      <el-tab-pane label="已经出函" name="third">
        <chuhan></chuhan
      ></el-tab-pane>
      <el-tab-pane label="已经过期" name="fourth"> <guoqi></guoqi></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import tiaohz from "@/view/Guarantee/tiaohz.vue";
import shenhe from "./baohan/shenhe.vue";
import shenhes from "./baohan/shenhes.vue";
import jujue from "./baohan/jujue.vue";
import chuhan from "./baohan/chuhan.vue";
import guoqi from "./baohan/guoqi.vue";
import { list, bhdetail, guaranteedel } from "@/api/list";
import { saveAs } from "file-saver";
export default {
  components: {
    // hear,
    // cioand,
    guoqi,
    chuhan,
    jujue,
    shenhe,
    shenhes,
    // tiaohz,
    // binad
  },
  data() {
    return {
      listlist: [],
      activeName: "first",
      // 弹出层标题
      title: "",
      // 文件列表
      formData: {},
      kuaidi: {
        geter: "",
        getaddress: "",
      },
      url: "http://192.168.0.28:8082/uploads/20220714/4376ae01afc1f73b95185b1d25180ea7.png",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      enclosure: {},
      filepath: "",
      ziliao: [
        {
          filename: "开户许可证", //
          filepath: "#",
        },
        {
          filename: "公司章程", //
          filepath: "#",
        },
        {
          filename: "近一年的审计报告", //
          filepath: "#",
        },
        {
          filename: "招标文件", //
          filepath: "#",
        },
      ],
      ziliao1: [
        {
          filename: "中标通知书", //
          filepath: "#",
        },
        {
          filename: "施工合同", //
          filepath: "#",
        },
        {
          filename: "保函格式", //
          filepath: "#",
        },
      ],
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        name: "",
      },
      params: {
        limit: 10,
        offset: 0,
        keywords: "",
      },
      // 表单校验
      rules: {},
      total: null,
      tableData: [],
      multipleSelection: [],
    };
  },

  created() {
    // this.lists();
  },
  methods: {
    //页面
    lists() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      list(this.params).then((response) => {
        console.log(response);
        this.listlist = response.data.data.rows;
        this.total = response.data.data.total;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        name: "",
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加档案架";
    },
    //详情
    handleUpdate(e) {
      this.reset();
      console.log("保函详情", e);
      bhdetail({ company_id: e.guarantee_apply_id }).then((response) => {
        console.log("保函详情", response);
        this.formData = response.data.data.jiben;
        if (response.data.data.kuaidi !== null) {
          console.log("kuaid");
          this.kuaidi = response.data.data.kuaidi;
        }
        if (response.data.data.enclosure !== null) {
          console.log("enclosure");
          // xieyi_file  zhenshi_file  zhenshi_file
          this.enclosure = response.data.data.enclosure;
        }
        if (response.data.data.ziliao != []) {
          this.ziliao = response.data.ziliao;
          return;
        }
        // this.ziliao=[
        //   response.data.ziliao[0],
        //     response.data.ziliao[1],
        //       response.data.ziliao[2],
        //        response.data.ziliao[3],
        // ]
        // this.ziliao1=[
        //   response.data.ziliao[4],
        //     response.data.ziliao[5],
        //       response.data.ziliao[6],
        // ]
        // this.listlist = response.data.rows;
      });
      this.open = true;
      this.title = "修改档案架";
    },
    del() {
      let arr = [];
      this.multipleSelection.forEach((item) => {
        arr.push(item.guarantee_apply_id);
      });
      arr = arr.toString();
      console.log(arr);
      // let user_id = sessionStorage.getItem("user_id");
      guaranteedel({ ids: arr }).then((res) => {
        if (res.data.code == 1) {
          this.$message.success("删除成功");
          this.lists();
        } else {
          this.$message.error("网络异常,稍后再试");
        }
      });
    },
    //提交按钮
    onSubmit() {
      alert("submit!");
      this.open = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.offset = parseInt(val - 1) * this.params.limit;
      this.lists();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    yxiazai(e) {
      console.log("yulan", e);
      if (e == undefined) {
        this.$message({
          message: "该文件不存在",
          type: "warning",
        });
        return;
      }
      var bbc = "http://192.168.0.28:8082" + e.filepath;
      console.log("文件链接", bbc);
      // return
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = bbc;
      link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },
    yxaizai(e) {
      console.log("yulan", e);
      if (e == undefined) {
        this.$message({
          message: "该文件不存在",
          type: "warning",
        });
        return;
      }
      var bbc = "http://192.168.0.28:8082" + e;
      console.log("文件链接", bbc);
      // return
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = bbc;
      link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },
    xiazai(e) {
      console.log("aigsdjagsdjgad新", e);
      if (e == undefined) {
        this.$message({
          message: "该文件不存在",
          type: "warning",
        });
        return;
      }
      if (e.filepath == null) {
        this.$message({
          message: "该文件不存在",
          type: "warning",
        });
        return;
      }
      var typle = e.filepath.split(".");
      var bbc = "http://192.168.0.28:8082" + e.filepath;
      console.log("文件链接", bbc);
      if (typle !== "pdf") {
        // var bbc="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        this.exportImageAct(bbc, e.filepath); //下载图片
        retuen;
      } else {
        var bbc = "http://192.168.0.28:8082" + e.filepath;
        // var bbc =
        //   "http://192.168.0.28:8082/uploads/bhfiles/20220919/BH_202209191663569674.pdf";
        this.srcList.push(this.url);
        this.getPdfBlob(bbc).then((blob) => {
          this.saveAs(blob, e.filepath); // 拿到 blob 并下载 pdf
        });
      }
    },
    xaizai(e) {
      console.log("下载", e);
      if (e == undefined) {
        this.$message({
          message: "该文件不存在",
          type: "warning",
        });
        return;
      }
      var typle = e.split(".");
      var bbc = "http://192.168.0.28:8082" + e;
      console.log("文件链接", bbc);
      if (typle !== "pdf") {
        // var bbc="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        this.exportImageAct(bbc, e); //下载图片
        retuen;
      } else {
        var bbc = "http://192.168.0.28:8082" + e;
        // var bbc =
        //   "http://192.168.0.28:8082/uploads/bhfiles/20220919/BH_202209191663569674.pdf";
        this.srcList.push(this.url);
        this.getPdfBlob(bbc).then((blob) => {
          this.saveAs(blob, e); // 拿到 blob 并下载 pdf
        });
      }
    },
    getPdfBlob(url) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("get", url + "?t=" + Math.random(), true);
        xhr.setRequestHeader("Content-Type", `application/pdf`);
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            //接受二进制文件流
            var blob = this.response;
            resolve(blob);
          }
        };
        xhr.send();
      });
    },
    save() {
      saveAs(blob, filename);
    },
    exportImageAct(imgUrl, imgName) {
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        this.aLinkDownload(imgUrl, imgName); // IE浏览器
      } else if (navigator.userAgent.indexOf("Firefox") !== -1) {
        this.imageCanvasAlink(imgUrl, imgName); // 火狐浏览器
      } else if (navigator.userAgent.indexOf("Chrome") !== -1) {
        this.fileUrlDownload(imgUrl, imgName); // Chrome内核浏览器
      } else {
        this.aLinkDownload(imgUrl, imgName);
      }
    }, // 下载图片的几种方式 // 接口返回文件流 chrome 浏览器会识别不了类型
    aLinkDownload(url, imgName) {
      var a = document.createElement("a");
      let event = new MouseEvent("click");
      a.href = url;
      if (imgName) {
        a.download = imgName + ".jpg";
      } else {
        a.download = "down_load.jpg";
      } // a.click();火狐浏览器不触发
      a.dispatchEvent(event);
    }, // 下载文件流的方式 火狐浏览器会默认XML格式，无法定义文件类型
    fileUrlDownload(url, imgName) {
      console.log(url, imgName);
      var xhr = new XMLHttpRequest();
      xhr.responseType = "blob"; // 返回类型blob
      xhr.onload = function () {
        // 定义请求完成的处理函数
        if (this.status === 200) {
          var blob = this.response;
          var reader = new FileReader();
          reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
          reader.onload = function (e) {
            var str = e.target.result;
            var type = str.substring(str.indexOf("/") + 1, str.indexOf(";"));
            var a = document.createElement("a"); // 转换完成，创建一个a标签用于下载
            let event = new MouseEvent("click");
            if (imgName) {
              a.download = imgName + "." + type;
            } else {
              a.download = "down_load.jpg";
            }
            a.href = e.target.result;
            a.dispatchEvent(event);
          };
        } else if (this.status === 504) {
          alert("导出失败，请求超时");
        } else {
          alert("导出失败");
        }
      };
      xhr.open("get", url, true); //此处为兼容后端中间件，设置请求头，文件格式
      xhr.setRequestHeader(
        "Accept",
        "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3"
      );
      xhr.send();
    }, // 通过canvas转换
    imageCanvasAlink(src, imgName) {
      console.log(src); // 通过Images对象
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function (e) {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height); // window.navigator.msSaveBlob(canvas.msToBlob(), 'image.jpg');
        let url = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        if (imgName) {
          a.download = imgName + ".jpg";
        } else {
          a.download = "down_load.jpg";
        }
        a.href = url; // 触发a的单击事件
        a.dispatchEvent(event);
      }; // 获取img上的src值，赋值之后，完成之后会调用onload事件
      image.src = src;
    },
  },
};
</script>
<style scoped>

</style>
<style>
 .baohanlist .is-active {
    border-bottom-color: #FFF;
    background: #409EFF !important;
    color: #ffff !important;
}
.lisy .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 10px !important;
}
</style>
<style scoped>
.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.EP_pdf_box {
  width: 335px;
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 16%);
  border-radius: 4px 4px 4px 4px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.EP_PDF_IMG_LEFT {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.yes {
  height: 200px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #cecece;
  display: flex;
  flex-direction: column;
}
.yesform {
  flex: 1;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.casd {
  flex: 1;
}
</style>
